<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">主页</span></el-breadcrumb-item>
      <el-breadcrumb-item>配种信息</el-breadcrumb-item>
      <el-breadcrumb-item><span>配种记录</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <!-- 搜索页 -->
      <el-dialog title="请输入检索信息" v-dialogDrag :visible.sync="searchPage" width="450px" :before-close="handleClose" id="searchDialog">
        <p style="color: red; padding-bottom: 10px; font-size: 0.5rem;">同时只能填写一项</p>
        <el-form :model="searchData">
          <el-form-item label="牧户姓名" label-width="70px">
            <el-input type="text" autocomplete="off" v-model="searchData.userName"></el-input>
          </el-form-item>
          <el-form-item label="母羊编号" label-width="70px">
            <el-input type="number" autocomplete="off" v-model="searchData.eweId"></el-input>
          </el-form-item>
          <el-form-item label="公羊编号" label-width="70px">
            <el-input type="number" autocomplete="off" v-model="searchData.ramId"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="searchPage = false">取 消</el-button>
          <el-button type="success" @click="searchInfo" @keyup.enter.native="searchInfo">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增页 -->
      <el-dialog title="羊只配种记录表" v-dialogDrag :visible.sync="addPage" width="1060px" id="appendDialog" :before-close="handleClose">
        <span style="color: rgb(33, 143, 247); margin-left: 1.875rem;">带<span style="color: red;">*</span>的为必填项</span>
        <el-form :inline="true" :model="inputValue" style="padding-top: 10px;">
          <el-form-item label="母羊编号" label-width="140px" style="margin-right: 8px;">
            <el-input type="number" v-model="inputValue.eweId"></el-input>
          </el-form-item>
          <span style="color: red;">*</span>
          <el-form-item label="公羊编号" label-width="135.5px" style="margin-right: 8px;">
            <el-input type="number" v-model="inputValue.ramId"></el-input>
          </el-form-item>
          <span style="color: red;">*</span>
          <el-form-item label="放栓时间(母)" label-width="135.5px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.begin_date"></el-input>
          </el-form-item>
          <el-form-item label="撤栓时间(母)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.finish_date"></el-input>
          </el-form-item>
          <el-form-item label="PMSG(母)" label-width="140px">
            <el-input type="number" v-model="inputValue.PMSG"></el-input>
          </el-form-item>
          <el-form-item label="PG" label-width="140px">
            <el-input type="number" v-model="inputValue.PG"></el-input>
          </el-form-item>
          <el-form-item label="采精量(公)" label-width="140px">
            <el-input type="number" v-model="inputValue.adopt_precise"></el-input>
          </el-form-item>
          <el-form-item label="精液活力(公)" label-width="140px">
            <el-select clearable v-model="inputValue.vitality" placeholder="请选择" style="width: 187px;">
              <el-option v-for="item in inputValue.vitalityOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="精液密度(公)" label-width="140px">
            <el-select clearable v-model="inputValue.density" placeholder="请选择" style="width: 187px;">
              <el-option v-for="item in inputValue.densityOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="稀释倍数(公)" label-width="140px">
            <el-input type="number" v-model="inputValue.dilution_ratio"></el-input>
          </el-form-item>
          <el-form-item label="采集日期(公)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.date"></el-input>
          </el-form-item>
          <el-form-item label="第一次发情日期(母)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.heat_firm1_date"></el-input>
          </el-form-item>
          <el-form-item label="第一次发情数量(母)" label-width="140px">
            <el-input type="number" v-model="inputValue.heat_firm1_number"></el-input>
          </el-form-item>
          <el-form-item label="第二次发情日期(母)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.heat_firm2_date"></el-input>
          </el-form-item>
          <el-form-item label="第二次发情数量(母)" label-width="140px">
            <el-input type="number" v-model="inputValue.heat_firm2_number"></el-input>
          </el-form-item>
          <el-form-item label="第一次输精量(公)" label-width="140px">
            <el-input type="number" v-model="inputValue.sperm_record1"></el-input>
          </el-form-item>
          <el-form-item label="第一次输精时间(公)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.sperm_record1_date"></el-input>
          </el-form-item>
          <el-form-item label="第二次输精量(公)" label-width="140px">
            <el-input type="number" v-model="inputValue.sperm_record2"></el-input>
          </el-form-item>
          <el-form-item label="第二次输精时间(公)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.sperm_record2_date"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="140px">
            <el-input type="text" v-model="inputValue.remake"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addPage = false">取 消</el-button>
          <el-button type="success" @click="add">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看与编辑页 -->
      <el-dialog title="羊只配种记录表" v-dialogDrag :visible.sync="checkPage" width="1060px" :before-close="handleClose">
        <el-form :inline="true" :model="row" style="padding-top: 10px;">
          <el-form-item label="母羊编号" label-width="140px" style="margin-right: 8px;">
            <el-input type="number" v-model="row.EWE_ID"></el-input>
          </el-form-item>
          <span style="color: red;">*</span>
          <el-form-item label="公羊编号" label-width="135.5px" style="margin-right: 8px;">
            <el-input type="number" v-model="row.RAM_ID"></el-input>
          </el-form-item>
          <span style="color: red;">*</span>
          <el-form-item label="放栓时间(母)" label-width="135.5px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.BEGIN_DATE"></el-input>
          </el-form-item>
          <el-form-item label="撤栓时间(母)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.FINISH_DATE"></el-input>
          </el-form-item>
          <el-form-item label="PMSG(母)" label-width="140px">
            <el-input type="number" v-model="row.PMSG"></el-input>
          </el-form-item>
          <el-form-item label="PG" label-width="140px">
            <el-input type="number" v-model="row.PG"></el-input>
          </el-form-item>
          <el-form-item label="采精量(公)" label-width="140px">
            <el-input type="number" v-model="row.ADOPT_PRECISE"></el-input>
          </el-form-item>
          <el-form-item label="精液活力(公)" label-width="140px">
            <el-select clearable v-model="row.VITALITY" placeholder="请选择" style="width: 187px;">
              <el-option v-for="item in modifyData.vitalityOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="精液密度(公)" label-width="140px">
            <el-select clearable v-model="row.DENSITY" placeholder="请选择" style="width: 187px;">
              <el-option v-for="item in modifyData.densityOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="稀释倍数(公)" label-width="140px">
            <el-input type="number" v-model="row.DILUTION_RATIO"></el-input>
          </el-form-item>
          <el-form-item label="采集日期(公)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.DATE"></el-input>
          </el-form-item>
          <el-form-item label="第一次发情日期(母)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.HEAT_FIRM1_DATE"></el-input>
          </el-form-item>
          <el-form-item label="第一次发情数量(母)" label-width="140px">
            <el-input type="number" v-model="row.HEAT_FIRM1_NUMBER"></el-input>
          </el-form-item>
          <el-form-item label="第二次发情日期(母)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.HEAT_FIRM2_DATE"></el-input>
          </el-form-item>
          <el-form-item label="第二次发情数量(母)" label-width="140px">
            <el-input type="number" v-model="row.HEAT_FIRM2_NUMBER"></el-input>
          </el-form-item>
          <el-form-item label="第一次输精量(公)" label-width="140px">
            <el-input type="number" v-model="row.SPERM_RECORD1"></el-input>
          </el-form-item>
          <el-form-item label="第一次输精时间(公)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.SPERM_RECORD1_DATE"></el-input>
          </el-form-item>
          <el-form-item label="第二次输精量(公)" label-width="140px">
            <el-input type="number" v-model="row.SPERM_RECORD2"></el-input>
          </el-form-item>
          <el-form-item label="第二次输精时间(公)" label-width="140px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.SPERM_RECORD2_DATE"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="140px">
            <el-input type="text" v-model="row.remake"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button id="checkPageButton" type="danger" @click="update">修 改</el-button>
          <el-button type="success" @click="checkPage = false">关 闭</el-button>
        </span>
      </el-dialog>
      <div id="headerArea">
        <h2 style="margin:10px 0 10px 10px; display: inline-block;">羊只配种记录表</h2>
        <div>
          <input v-show="false" ref="elementData" type="file" @change="importExcel(this)" />
          <el-button type="success" size="mini" @click="$refs.elementData.click()">导入
          </el-button>
          <el-button type="success" size="mini" style="margin-right: 15px;" @click="exportExcel">导出
          </el-button>
        </div>
      </div>
      <template>
        <!--这里v-if-->
        <el-button @click="addPage = true" round type="success" slot="append" icon="el-icon-edit"
          style="margin: 10px 10px 10px 10px;">新增</el-button>
        <el-button round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 10px 10px;"
          @click="searchPage = true">搜索</el-button>
      </template>
      <!-- 表格区 -->
      <el-table @sort-change="sortTable" max-height="400" :data="tableData"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}" border stripe @row-click="getDetails"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="ID">
        <!--.slice((queryInfo.pagenum-1)*5,queryInfo.pagenum*5)-->
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column width="40"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
        <el-table-column type="expand">
          <div slot-scope="props" style="margin-left: 20px;">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="ID:">
                <span>{{ props.row.ID }}</span>
              </el-form-item>
              <el-form-item label="牧户姓名:">
                <span>{{ props.row.NAME }}</span>
              </el-form-item>
              <el-form-item label="母羊编号:">
                <span>{{ props.row.EWE_ID }}</span>
              </el-form-item>
              <el-form-item label="公羊编号:">
                <span>{{ props.row.RAM_ID }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="放栓时间:">
                <span>{{ props.row.BEGIN_DATE }}</span>
              </el-form-item>
              <el-form-item label="撤栓时间:">
                <span>{{ props.row.FINISH_DATE }}</span>
              </el-form-item>
              <el-form-item label="PMSG:">
                <span>{{ props.row.PMSG }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="PG:">
                <span>{{ props.row.PG }}</span>
              </el-form-item>
              <el-form-item label="采精量(ml):">
                <span>{{ props.row.ADOPT_PRECISE }}</span>
              </el-form-item>
              <el-form-item label="精液活力:">
                <span>{{ props.row.VITALITY }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="精液密度:">
                <span>{{ props.row.DENSITY }}</span>
              </el-form-item>
              <el-form-item label="稀释倍数:">
                <span>{{ props.row.DILUTION_RATIO }}</span>
              </el-form-item>
              <el-form-item label="采集日期:">
                <span>{{ props.row.DATE }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="发情鉴定(日期1):">
                <span>{{ props.row.HEAT_FIRM1_DATE }}</span>
              </el-form-item>
              <el-form-item label="发情鉴定(数量1):">
                <span>{{ props.row.HEAT_FIRM1_NUMBER }}</span>
              </el-form-item>
              <el-form-item label="发情鉴定(日期)2:">
                <span>{{ props.row.HEAT_FIRM2_DATE }}</span>
              </el-form-item>
              <el-form-item label="发情鉴定(数量2):">
                <span>{{ props.row.HEAT_FIRM2_NUMBER }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="输精量1(ml):">
                <span>{{ props.row.SPERM_RECORD1 }}</span>
              </el-form-item>
              <el-form-item label="输精时间1:">
                <span>{{ props.row.SPERM_RECORD1_DATE }}</span>
              </el-form-item>
              <el-form-item label="输精量2(ml):">
                <span>{{ props.row.SPERM_RECORD2 }}</span>
              </el-form-item>
              <el-form-item label="输精时间3:">
                <span>{{ props.row.SPERM_RECORD2_DATE }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="备注:">
                <span>{{ props.row.remark }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-table-column>
        <el-table-column sortable="custom" prop="ID" label="ID" align="center"></el-table-column>
        <el-table-column width="100px" prop="NAME" label="牧户姓名" align="center"></el-table-column>
        <el-table-column sortable="custom" width="110px" prop="EWE_ID" label="母羊编号" align="center"></el-table-column>
        <el-table-column sortable="custom" width="110px" prop="RAM_ID" label="公羊编号" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="200px" prop="BEGIN_DATE" label="放栓时间" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="200px" prop="FINISH_DATE" label="撤栓时间" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="100px" prop="PMSG" label="PMSG" align="center"></el-table-column>
        <el-table-column sortable="custom" width="65px" prop="PG" label="PG" align="center"></el-table-column>
        <el-table-column sortable="custom" width="120px" prop="ADOPT_PRECISE" label="采精量(ml)" align="center">
        </el-table-column>
        <el-table-column width="110px" prop="VITALITY" label="精液活力" align="center"></el-table-column>
        <el-table-column width="110px" prop="DENSITY" label="精液密度" align="center"></el-table-column>
        <el-table-column sortable="custom" width="110px" prop="DILUTION_RATIO" label="稀释倍数" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="200px" prop="DATE" label="采集日期" align="center"></el-table-column>
        <el-table-column label="发情鉴定" align="center">
          <el-table-column sortable="custom" width="200px" prop="HEAT_FIRM1_DATE" label="日期" align="center">
          </el-table-column>
          <el-table-column sortable="custom" prop="HEAT_FIRM1_NUMBER" label="数量" align="center"></el-table-column>
          <el-table-column sortable="custom" width="200px" prop="HEAT_FIRM2_DATE" label="日期" align="center">
          </el-table-column>
          <el-table-column sortable="custom" prop="HEAT_FIRM2_NUMBER" label="数量" align="center"></el-table-column>
        </el-table-column>
        <el-table-column label="第一次输精" align="center">
          <el-table-column sortable="custom" width="120px" prop="SPERM_RECORD1" label="输精量(ml)" align="center">
          </el-table-column>
          <el-table-column sortable="custom" width="200px" prop="SPERM_RECORD1_DATE" label="输精时间" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="第二次输精" align="center">
          <el-table-column sortable="custom" width="120px" prop="SPERM_RECORD2" label="输精量(ml)" align="center">
          </el-table-column>
          <el-table-column sortable="custom" width="200px" prop="SPERM_RECORD2_DATE" label="输精时间" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column prop="Operate" label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="查看编辑" placement="top-start" :enterable="false">
                <el-button @click="checkPage = true" type="success" icon="el-icon-edit"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="padding-right: 0;" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" layout="total, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchData: {
          userName: '',   //牧户姓名
          eweId: '',      //母羊编号
          ramId: '',      //公羊编号
        },
        tableData: [],
        searchPage: false,
        addPage: false,
        checkPage: false,
        row: {},
        inputValue: {
          eweId: '',         //母羊编号
          ramId: '',         //公羊编号
          begin_date: '',     //放栓时间(母)
          finish_date: '',    //撤栓时间(母)
          PMSG: '',           //PMSG(母)
          PG: '',             //PG(母)
          adopt_precise: '',  //采精量(公)
          vitality: '',       //精液活力(公)
          vitalityOptions: [{
            value: '良',
            label: '良'
          }, {
            value: '优',
            label: '优'
          }],
          density: '',        //精液密度(公)
          densityOptions: [{
            value: '良',
            label: '良'
          }, {
            value: '优',
            label: '优'
          }],
          dilution_ratio: '', //稀释倍数(公)
          date: '',           //采集日期(公)
          heat_firm1_date: '',    //第一次发情日期(母)
          heat_firm1_number: '',    //第一次发情数量(母)
          heat_firm2_date: '',    //第二次发情日期(母)
          heat_firm2_number: '',    //第二次发情数量(母)
          sperm_record1: '',      //第一次输精量(公)
          sperm_record1_date: '', //第一次输精时间(公)
          sperm_record2: '',      //第二次输精量(公)
          sperm_record2_date: '', //第二次输精时间(公)
          remark: '',             //备注
        },
        queryInfo: {
          pagenum: 1, // 当前页码
          total: 0
        },
        sortValue: {
          sortLowNum: '',
          ISAsc: ''
        },
        isSearch: false,
        searchBySheepId: false,
        modifyData: {
          vitalityOptions: [{
            value: '良',
            label: '良'
          }, {
            value: '优',
            label: '优'
          }],
          densityOptions: [{
            value: '良',
            label: '良'
          }, {
            value: '优',
            label: '优'
          }]
        },
        exportData: null,
      }
    },
    mounted() {
      this.handleRequestGetInfo()
    },
    activated() {
      // if (this.$store.state.diameterMax && this.$store.state.diameterMin) {
      //   this.searchData.diameterMax = this.$store.state.diameterMax;
      //   this.searchData.diameterMin = this.$store.state.diameterMin;
      //   this.searchInfo()
      //   this.$store.commit("emptyDiameter"); //重置vuex里存储的羊只编号
      // }
    },
    methods: {
      // 排序
      sortTable({ column, prop, order }) {
        switch (prop) {
          case 'ID': this.sortValue.sortLowNum = 1; break;
          case 'EWE_ID': this.sortValue.sortLowNum = 3; break;
          case 'RAM_ID': this.sortValue.sortLowNum = 4; break;
          case 'BEGIN_DATE': this.sortValue.sortLowNum = 5; break;
          case 'FINISH_DATE': this.sortValue.sortLowNum = 6; break;
          case 'PMSG': this.sortValue.sortLowNum = 7; break;
          case 'PG': this.sortValue.sortLowNum = 8; break;
          case 'ADOPT_PRECISE': this.sortValue.sortLowNum = 9; break;
          case 'DILUTION_RATIO': this.sortValue.sortLowNum = 12; break;
          case 'DATE': this.sortValue.sortLowNum = 13; break;
          case 'HEAT_FIRM1_DATE': this.sortValue.sortLowNum = 14; break;
          case 'HEAT_FIRM1_NUMBER': this.sortValue.sortLowNum = 15; break;
          case 'HEAT_FIRM2_DATE': this.sortValue.sortLowNum = 16; break;
          case 'HEAT_FIRM2_NUMBER': this.sortValue.sortLowNum = 17; break;
          case 'SPERM_RECORD1': this.sortValue.sortLowNum = 18; break;
          case 'SPERM_RECORD1_DATE': this.sortValue.sortLowNum = 19; break;
          case 'SPERM_RECORD2': this.sortValue.sortLowNum = 20; break;
          case 'SPERM_RECORD2_DATE': this.sortValue.sortLowNum = 21; break;
        }
        if (order == "ascending") {
          this.sortValue.ISAsc = 1;
          console.log("升序了");
        } else if (order == "descending") {
          this.sortValue.ISAsc = 0;
          console.log("降序了");
        } else {
          this.sortValue.ISAsc = '';
          console.log("取消排序");
        }
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo()
        else this.handleRequestGetInfo()
      },

      //进入页面默认加载
      async handleRequestGetInfo() {
        let { data } = await this.$axios({
          method: 'post',
          url: '/breedInfo/breedRecord',
          data: {
            sortLowNum: this.sortValue.sortLowNum,
            ISAsc: this.sortValue.ISAsc,
            page: this.queryInfo.pagenum,
            isPage: 1
          }
        })
        console.log(data);
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        this.tableData = data.data.result
        this.queryInfo.total = data.data.countAll
      },
      //查询
      async searchInfo() {
        console.log(this.searchData, this.queryInfo.pagenum);
        let { data } = await this.$axios({
          method: 'post',
          url: '/breedInfo/breedRecord/find',
          data: {
            //下面三个参数 只可有一个
            userName: this.searchData.userName,   //牧户姓名
            eweId: this.searchData.eweId,      //母羊编号
            ramId: this.searchData.ramId,      //公羊编号
            sortLowNum: this.sortValue.sortLowNum,   //第几列的排序数，从左往右，从1开始
            ISAsc: this.sortValue.ISAsc,         //增还是减  1为增，0为减
            page: this.queryInfo.pagenum,          //页码
            isPage: 1
          }
        })
        //如果查询成功
        console.log(data);
        if (data.code === 0) {
          // this.$message({
          //   type: 'success',
          //   message: data.msg,
          //   duration: 1500
          // })
        } else {
          //查询失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        this.searchPage = false
        this.tableData = data.data.result
        this.queryInfo.total = data.data.countAll
      },

      //新增
      async add() {
        console.log(this.inputValue);
        console.log("添加开始");
        let { data } = await this.$axios({
          method: 'post',
          url: '/breedInfo/breedRecord/add/single',
          data: {
            eweId: this.inputValue.eweId,         //母羊编号
            ramId: this.inputValue.ramId,         //公羊编号
            begin_date: this.inputValue.begin_date,     //放栓时间(母)
            finish_date: this.inputValue.finish_date,    //撤栓时间(母)
            PMSG: this.inputValue.PMSG,           //PMSG(母)
            PG: this.inputValue.PG,             //PG(母)
            adopt_precise: this.inputValue.adopt_precise,  //采精量(公)
            vitality: this.inputValue.vitality,       //精液活力(公)
            density: this.inputValue.density,        //精液密度(公)
            dilution_ratio: this.inputValue.dilution_ratio, //稀释倍数(公)
            date: this.inputValue.date,           //采集日期(公)
            heat_firm1_date: this.inputValue.heat_firm1_date,    //第一次发情日期(母)
            heat_firm1_number: this.inputValue.heat_firm1_number,    //第一次发情数量(母)
            heat_firm2_date: this.inputValue.heat_firm2_date,    //第二次发情日期(母)
            heat_firm2_number: this.inputValue.heat_firm2_number,    //第二次发情数量(母)
            sperm_record1: this.inputValue.sperm_record1,      //第一次输精量(公)
            sperm_record1_date: this.inputValue.sperm_record1_date, //第一次输精时间(公)
            sperm_record2: this.inputValue.sperm_record2,      //第二次输精量(公)
            sperm_record2_date: this.inputValue.sperm_record2_date, //第二次输精时间(公)
            remark: this.inputValue.remark,             //备注
          }
        })
        console.log(data);
        console.log("添加结束");
        //如果添加成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //添加失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        this.addPage = false
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo()
        else this.handleRequestGetInfo()
      },

      //批量导入
      async importExcelData(excelData) {
        console.log(excelData);
        let { data } = await this.$axios({
          method: 'post',
          url: '/breedInfo/breedRecord/add/batch',
          data: {
            arr: excelData
          }
        })
        //如果导入成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 3000
          })
        } else {
          //导入失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 3000
          })
        }
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo()
        else this.handleRequestGetInfo()
      },

      //编辑更新
      async update() {
        console.log("更新开始");
        console.log(this.row);
        let { data } = await this.$axios({
          method: 'post',
          url: '/breedInfo/breedRecord/update',
          data: {
            ID: this.row.ID,  // 配种信息编号
            eweId: this.row.EWE_ID,         //母羊编号
            ramId: this.row.RAM_ID,         //公羊编号
            //以上为修改条件的索引，全都要
            //以下为修改的内容，不可为空，备注***可为空
            begin_date: this.row.BEGIN_DATE,     //放栓时间(母)
            finish_date: this.row.FINISH_DATE,    //撤栓时间(母)
            PMSG: this.row.PMSG,           //PMSG(母)
            PG: this.row.PG,             //PG(母)
            adopt_precise: this.row.ADOPT_PRECISE,  //采精量(公)
            vitality: this.row.VITALITY,       //精液活力(公)
            density: this.row.DENSITY,        //精液密度(公)
            dilution_ratio: this.row.DILUTION_RATIO, //稀释倍数(公)
            date: this.row.DATE,           //采集日期(公)
            heat_firm1_date: this.row.HEAT_FIRM1_DATE,    //第一次发情日期(母)
            heat_firm1_number: this.row.HEAT_FIRM1_NUMBER,    //第一次发情数量(母)
            heat_firm2_date: this.row.HEAT_FIRM2_DATE,    //第二次发情日期(母)
            heat_firm2_number: this.row.HEAT_FIRM2_NUMBER,    //第二次发情数量(母)
            sperm_record1: this.row.SPERM_RECORD1,      //第一次输精量(公)
            sperm_record1_date: this.row.SPERM_RECORD1_DATE, //第一次输精时间(公)
            sperm_record2: this.row.SPERM_RECORD2,      //第二次输精量(公)
            sperm_record2_date: this.row.SPERM_RECORD2_DATE, //第二次输精时间(公)
            remark: this.row.remark,             //备注 ***
          }
        })
        console.log("更新结束");
        console.log(data);
        //如果更新成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //更新失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo()
        else this.handleRequestGetInfo()
        this.checkPage = false
      },

      //通用弹出框函数
      handleClose(done) {
        this.$messagebox.confirm('确认关闭？')
          .then(_ => { done() })
          .catch(_ => { })
      },

      // 改变页码值
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage;
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) {
          this.searchInfo()
          this.isTurnThePage = true
        }
        else {
          this.handleRequestGetInfo()
        }
      },

      //获取点击行数据并赋值给row
      getDetails(row) {
        this.row = JSON.parse(JSON.stringify(row)) // 调用JSON方法防止内存冲突
      },


      //导出Excel表格
      async exportExcel() {
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) {
          let { data } = await this.$axios({
            method: 'post',
            url: '/breedInfo/breedRecord/find',
            data: {
              //下面三个参数 只可有一个
              userName: this.searchData.userName,   //牧户姓名
              eweId: this.searchData.eweId,      //母羊编号
              ramId: this.searchData.ramId,      //公羊编号
              sortLowNum: this.sortValue.sortLowNum,   //第几列的排序数，从左往右，从1开始
              ISAsc: this.sortValue.ISAsc,         //增还是减  1为增，0为减
              page: this.queryInfo.pagenum,          //页码
              isPage: 0
            }
          })
          this.exportData = data.data.result
        }
        else {
          let { data } = await this.$axios({
            method: 'post',
            url: '/breedInfo/breedRecord',
            data: {
              sortLowNum: this.sortValue.sortLowNum,
              ISAsc: this.sortValue.ISAsc,
              page: this.queryInfo.pagenum,
              isPage: 0
            }
          })
          this.exportData = data.data.result
        }
        const exportData = JSON.parse(JSON.stringify(this.exportData).replace(/NAME/g, "牧户姓名")
          .replace(/EWE_ID/g, "母羊编号").replace(/RAM_ID/g, "公羊编号").replace(/BEGIN_DATE/g, "放栓时间(母)")
          .replace(/FINISH_DATE/g, "撤栓时间(母)").replace(/ADOPT_PRECISE/g, "采精量(公)").replace(/VITALITY/g, "精液活力(公)")
          .replace(/DENSITY/g, "精液密度(公)").replace(/DILUTION_RATIO/g, "稀释倍数(公)").replace(/HEAT_FIRM1_DATE/g, "第一次发情日期(母)")
          .replace(/HEAT_FIRM1_NUMBER/g, "第一次发情数量(母)").replace(/HEAT_FIRM2_DATE/g, "第二次发情日期(母)")
          .replace(/HEAT_FIRM2_NUMBER/g, "第二次发情数量(母)").replace(/SPERM_RECORD1_DATE/g, "第一次输精时间(公)")
          .replace(/SPERM_RECORD2_DATE/g, "第二次输精时间(公)").replace(/SPERM_RECORD1/g, "第一次输精量(公)")
          .replace(/SPERM_RECORD2/g, "第二次输精量(公)").replace(/remark/g, "备注").replace(/DATE/g, "采集日期(公)")
          .replace(/PMSG/g, "PMSG(母)").replace(/PG/g, "PG(母)"));
        // console.log(this.tableData);
        // console.log(obj);
        let data = exportData;
        //1. 新建一个工作簿
        let workbook = this.$XLSX.utils.book_new();
        //2. 把json对象转成工作表
        let sheet = this.$XLSX.utils.json_to_sheet(data);
        //3.在工作簿中添加工作表
        this.$XLSX.utils.book_append_sheet(workbook, sheet, '羊只配种记录表'); //工作簿名称
        //4.输出工作表,由文件名决定的输出格式
        this.$XLSX.writeFile(workbook, '羊只配种记录表(导出日期：' + this.$moment().format("YYYY年MM月DD日 HH时mm分ss秒 dddd") + ').xlsx'); // 保存的文件名
      },

      //导入Excel表格数据
      importExcel() {
        let obj = this.$refs.elementData
        let file = obj.files[0];
        if (!obj.files || file == undefined) return
        let $this = this //将vm的值赋值给变量$this
        {
          let reader = new FileReader();
          reader.onload = function (e) {
            let data = e.target.result;
            let tempData = $this.$XLSX.read(data, { type: 'binary' });
            $this.importData = JSON.stringify($this.$XLSX.utils.sheet_to_json(tempData.Sheets[tempData.SheetNames[0]]))
            $this.importExcelData($this.importData)
          };
          reader.readAsArrayBuffer(file);
          obj.value = null //防止多次导入同一个文件时函数不执行
        }
      }
    },
  }

</script>
<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  #checkPageButton {
    margin-right: 40px;
    width: 100px;
    height: 42px;
  }

  #checkPageButton+button {
    width: 100px;
    height: 42px;
  }

  .demo-table-expand {
    font-size: 10px;
  }

  .el-form>>>.el-form-item__label {
    width: 140px;
    color: #000000;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 12%;
  }

  #searchDialog>>>.el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
  }

  #headerArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #appendDialog>>>.el-dialog__body {
    padding-top: 0;
  }
</style>